<template>
  <div id="BarRate"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart, LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'BarRate',
  data () {
    return {
      myChart: null,
      // 数据
      ratelist: []
    }
  },
  created () {
    echarts.use([
      ToolboxComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent,
      BarChart,
      LineChart,
      CanvasRenderer,
      UniversalTransition
    ])
  },
  mounted () {
    // 找到这个容器
    this.myChart = echarts.init(this.$el)
    // 配置项
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          //   type: 'cross', -- x-y 指示器
          //   type: 'line' -- 没有x-y 指示器 - 线选中
          //   type：'shadow' -- 没有x-y 指示器 - 图形
          type: 'cross',
          // 线的颜色
          crossStyle: {
            color: '#999'
          },
          label: {
            // 小方块背景颜色
            backgroundColor: '#6a7985'
            // backgroundColor: '#e10602'
            // 小方块字体颜色
            // color: '#e10602'
          }
        }
      },
      toolbox: {
        feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ['line', 'bar'] },
          //   restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        show: true,
        top: '85%',
        //图例每项之间的间隔
        itemGap: 32,
        itemWidth: 14,
        itemHeight: 14,
        //图例文字样式
        textStyle: {
          color: '#333',
          fontSize: 16
        }
      },
      xAxis: [
        {
          type: 'category',
          // 底部坐标-当显示不下的时候，隔行显示
          data: [
            '2023-1',
            '2023-2',
            '2023-3',
            '2023-4',
            '2023-5',
            '2023-6',
            '2023-7',
            '2023-8',
            '2023-9',
            '2023-10',
            '2023-11',
            '2023-12'
          ],
          //   splitNumber: 12,
          // 每一项中间对齐
          //   axisTick: {
          //     alignWithLabel: true
          //   },
          // 每一项样式
          axisLabel: {
            color: '#666666',
            fontSize: 12
          },
          // 轴心样式
          axisLine: {
            lineStyle: {
              color: '#EFEFEF'
            }
          },
          // 指示器触发形式-选中图
          // 父级使用
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '金额(元)',
          splitNumber: 5,
          nameTextStyle: {
            color: '#666666',
            fontSize: 16,
            padding: [0, 0, 0, 0]
          },

          //是否显示刻度
          axisTick: {
            show: false
          },
          //y轴线样式修改
          axisLine: {
            show: true,
            lineStyle: {
              color: '#EFEFEF'
            }
          },
          //y轴样式修改
          axisLabel: {
            color: '#666666',
            fontSize: 16
          },
          splitNumber: 5,
          //分割线是否显示
          splitLine: {
            lineStyle: true
          },
          splitArea: {
            show: false
          }
        },
        {
          type: 'value',
          name: '回款率%',
          //文字样式-单位样式
          nameTextStyle: {
            color: '#666666',
            fontSize: 16,
            padding: [0, 0, 0, 35]
          },
          min: 0,
          max: 100,
          // 间隔高度
          interval: 5,
          // 单位
          //   axisLabel: {
          //     formatter: '{value}%'
          //   },
          //间隔数
          interval: 20,
          //y轴刻度名称-样式
          axisLabel: {
            formatter: '{value}%',
            color: '#666666',
            fontSize: 16
          },
          //y轴线-是否显示
          axisLine: {
            show: true,
            lineStyle: {
              color: '#EFEFEF'
            }
          },
          // 分隔区域是否显示-默认不显示
          splitArea: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '应收金额',
          type: 'bar',
          // 每一项单位
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + ' ml'
          //     }
          //   },
          //柱状背景设置渐变色
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: '#598CF9'
              },
              {
                offset: 1,
                color: '#2C6DFF'
              }
            ]),
            //柱状圆角
            borderRadius: [25, 25, 0, 0]
          },
          data: [
            2.0,
            4.9,
            7.0,
            23.2,
            25.6,
            76.7,
            135.6,
            162.2,
            32.6,
            20.0,
            6.4,
            3.3
          ]
        },
        {
          name: '回款金额',
          type: 'bar',
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + ' ml'
          //     }
          //   },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: '#53D8A4 '
              },
              {
                offset: 1,
                color: '#16C47E'
              }
            ]),
            borderRadius: [25, 25, 0, 0]
          },
          data: [
            2.6,
            5.9,
            9.0,
            26.4,
            28.7,
            70.7,
            175.6,
            182.2,
            48.7,
            18.8,
            6.0,
            2.3
          ]
        },
        {
          name: '回款率',
          type: 'line',
          yAxisIndex: 1,
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + ' °C'
          //     }
          //   },
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 2.3, 2.4, 2.0, 2.5, 2.0, 2.0],
          itemStyle: {
            color: '#FFC020 '
          }
        }
      ]
    }
    // 渲染数据
    this.myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>
#BarRate {
  width: 100%;
  height: 100%;
}
</style>
